import React, { ReactElement } from 'react';
import { Clipboard, View } from 'react-native';
import Button from '../../../../components/Button';
import DashLine from '../../../../components/DashLine';
import CustomText from '../../../../components/Text';
import { toolTipOpen } from '../../../../util/global';
import OrderContent from '../OrderContent';
import OrderItem from '../OrderItem';

import styles from './style';

export default (): ReactElement => {
  return (
    <View>
      <OrderItem title="订单信息">
        <View style={styles.list}>
          <OrderContent name="订单号：" detail="329487829374989034" />
          <OrderContent name="订单状态：" detail="支付成功" />
          <Button
            hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
            text="复制"
            style={styles.copyContent}
            textStyle={styles.copy}
            onPress={(): void => {
              Clipboard.setString('');
              toolTipOpen({ desc: '复制成功' });
            }}
          />
        </View>
      </OrderItem>
      <OrderItem title="课程信息">
        {[1, 2, 3].map(
          (Orderitem, index): ReactElement => (
            <View style={styles.courseContent}>
              <CustomText style={styles.courseName}>
                2020初中数学题分班
              </CustomText>
              <CustomText style={styles.courseStartTime}>
                开课时间：2020年04月02日 {`${'    '}`}时长：15讲
              </CustomText>
              {index !== 0 && (
                <DashLine
                  style={styles.dash}
                  length={30}
                  dashStyle={styles.dashItem}
                />
              )}
            </View>
          )
        )}
      </OrderItem>
      <OrderItem title="包裹1">
        <CustomText style={styles.packageName}>2020初中数学新编讲义</CustomText>
        <CustomText style={styles.packageDate}>
          更新时间：2020-09-23 18:12:00
        </CustomText>
        <Button
          hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
          text="查看物流"
          activity
          textStyle={styles.packageInfo}
          onPress={(): void => {}}
        />
        <CustomText style={styles.packageStatus}>已发货</CustomText>
      </OrderItem>
      <OrderItem title="包裹2">
        <CustomText style={styles.packageName}>
          寒假·7年级数学·提高班
        </CustomText>
        <CustomText style={styles.packageDate}>
          更新时间：2020-09-23 18:12:00
        </CustomText>
        <Button
          hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
          text="暂无物流信息"
          activity={false}
          textStyle={[styles.packageInfo, styles.noPackageInfo]}
          onPress={(): void => {}}
        />
        <CustomText style={styles.packageStatus}>未发货</CustomText>
      </OrderItem>
      <OrderItem title="订单信息">
        <View style={styles.list}>
          <OrderContent name="订单金额：" detail="¥2999" />
          <OrderContent name="实际支付：" detail="¥2699" />
          <OrderContent name="支付方式：" detail="微信支付" />
          <OrderContent name="下单时间：" detail="2020.04.01 14:28:05" />
        </View>
      </OrderItem>
    </View>
  );
};
